<template>
	<view class="account_analysis_detail_content tn-safe-area-inset-bottom">
		<tn-nav-bar :bottomShadow="false" backTitle="" backgroundColor="#ffd946">
			<view class="bar_title">{{title}}</view>
		</tn-nav-bar>
		<view class="top_content tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center" :style="{marginTop: vuex_custom_bar_height + 'px'}">
			<tn-avatar :src="userLogo" border borderColor="#FFF" class="logo"></tn-avatar>
			<view class="name">{{vuex_user.nickname}}</view>
			<!-- <view class="tooltip">这是我们相识的第200天</view> -->
		</view>

		<view class="card out_catgory_content">
			<view class="title">支出类别</view>
			<l-echart class="chart" ref="out_catgory_chart"></l-echart>
		</view>

		<view class="card out_trend_content">
			<view class="title">支出趋势</view>
			<l-echart class="out_trend_chart" ref="out_trend_chart"></l-echart>
		</view>

		<view class="card out_compare_content">
			<view class="title">月支出对比</view>
			<l-echart class="out_compare_chart" ref="out_compare_chart"></l-echart>
		</view>

		<view class="card out_line_content">
			<view class="title">记账成就</view>
		</view>

	</view>
</template>

<script>
	import { getRingOption } from '@/utils/echarts/json/out_catgory_chart-ring.js';
	import { getBarOption } from '@/utils/echarts/json/out_compare_chart-bar.js';
	import { getLineOption } from '@/utils/echarts/json/out_trend_chart-line.js';
	import { sumAnalysisByCategory, sumAnalysis } from '@/api/account/analysis';
	export default {
		name: 'AccountAnalysisMonthDetail',
		data() {
			return {
				title: "",
				date: null,
			}
		},
		onLoad(option) {
			if (option.monthDate) {
				this.date = option.monthDate;
				this.title = option.monthDate + "账单";
				this.outCatgoryChart();
				this.outTrendChart();
				this.outCompareChart();
			}
		},
		created() {},
		mounted() {},
		computed: {
			userLogo() {
				if (this.vuex_user && this.vuex_user.avatar) {
					return uni.$biconfig.SERVER_URL + this.vuex_user.avatar;
				}
				return '/static/images/my/defaultUserLogo.png';
			}
		},
		methods: {
			outCatgoryChart() {
				let entity = {
					accountType: 0,
					value: this.date + "-01"
				}
				sumAnalysisByCategory(entity).then(res => {
					let { result } = res;
					let dataList = result.map(item => {
						return {
							name: item.categoryName,
							value: item.sumMoney
						}
					})
					let chartDataList = [{
						legendName: "",
						dataList: dataList
					}];
					let option = getRingOption(chartDataList);
					this.$refs.out_catgory_chart?.init(this.$echarts, chart => {
						chart.setOption(option)
					})
				}).finally(res => {});
			},
			outTrendChart() {
				let entity = {
					type: 20,
					value: this.date
				}
				sumAnalysis(entity).then(res => {
					let { result } = res;
					let dataList = result.map(item => {
						return {
							name: item.date.split("-")[2],
							value: item.sumOut
						}
					})
					let chartDataList = [{
						legendName: "支出趋势",
						dataList: dataList
					}];
					let option = getLineOption(chartDataList);
					this.$refs.out_trend_chart?.init(this.$echarts, chart => {
						chart.setOption(option)
					})
				}).finally(res => {});
			},
			outCompareChart() {
					let entity = {
						type: 10,
						value: this.date.split("-")[0]
					}
					sumAnalysis(entity).then(res => {
						let { result } = res;
						//从当前月份 向前面推6个月情况
						let dataList = result.reverse().map(item => {
							return {
								name: item.date.split("-")[1],
								value: item.sumOut
							}
						}).filter(item => Number(item.name) <= Number(this.date.split("-")[1]));
						let chartDataList = [{
							legendName: "月支出对比",
							dataList: dataList.slice(-6)
						}];
						let option = getBarOption(chartDataList);
						this.$refs.out_compare_chart?.init(this.$echarts, chart => {
							chart.setOption(option)
						})
					}).finally(res => {});
			},
		}
	}
</script>
<style>
	page {
		background: var(--UI-BG-1);
	}
</style>
<style lang="scss" scoped>
	.account_analysis_detail_content {
		.card {
			background-color: #fff;
			margin: 20rpx 0px;

			.title {
				padding: 0px 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				font-weight: bolder;
			}

			.chart {
				height: 300rpx;
			}
			.out_trend_chart{
				height: 400rpx;
			}
			.out_compare_chart{
				height: 400rpx;
			}
		}

		.top_content {
			background-color: $base-color;
			// height: 300rpx;
			padding-bottom: 20rpx;

			.logo {
				width: 140rpx;
				height: 140rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
			}

			.name {
				font-size: 30rpx;
				font-weight: bolder;
				color: #000;
				margin-bottom: 10rpx;
			}

			.tooltip {
				font-size: 26rpx;
				color: #333;
			}
		}
	}
</style>